<!-- 自定义弹窗输入框组件 -->
<!-- 创建圈子组件 -->
<!-- prompt组件 -->
<!-- prompt -->
<template>
	<view class="prompt-box" :hidden="isHidden">
		<view class="prompt-content contentFontColor">
			<view class="prompt-title">{{title}}</view>
			<!-- 名称 -->
			<input class="prompt-input" type="text" @input="_input" :value="cost" v-if="title == '名称'" />

			<view class="textarea" v-if="title == '介绍'">
				<textarea class="prompt-textarea" @input="_textarea" v-model="textarea" maxlength="100" />
				<text>（{{textarea.length}}/100）</text>
				</view>


			<view class="prompt-btn-group">
				<view class="btn-item" @tap="_cancel">取消</view>
				<view class="btn-item last-btn" @tap="_confirm">确定</view>
			</view>
		</view>
	</view>
</template>
<script>
	var input ;
	var content;
	export default {
		data() {
			return {
				multipleSlots: true,// 在组件定义时的选项中启用多slot支持
				isHidden: true,
				cost:'',
				textarea : ''
			};
		},
		props:{
			title: {            
			  type: String,    
			  default: '提示'    
			}
		},
		methods: {
			hide: function () {
			  this.isHidden=true;
			},
			show(e) {
			  this.isHidden=false;
				if(e!=null&&e!=undefined&&e!=""){
					this.text = e;
				}
			},
			/*
			 * 内部私有方法建议以下划线开头
	 		 * triggerEvent 用于触发事件
			 */
			
			_confirm () {
		   if(this.title == '名称'){
			   this.$emit('onConfirm', this.cost);
			    input = this.cost
		   }else {
			   this.$emit('onConfirm', this.textarea);
			    content = this.textarea
		   }
			},
			_cancel () {
			  this.hide();
			  this.cost = input || '';
			  this.textarea = content || '';
			},
			_input(e){
				this.cost = e.detail.value;
			},
			_textarea(e){
				if(this.textarea.length >= 100){
					uni.showToast({
						title: '圈子介绍上限100字',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				this.textarea = e.detail.value;
			}
		}
	}
</script>

<style>
/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.5);
}

.prompt-content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%); 
  overflow: hidden;
  background: #fff;
}

.prompt-title {
  width: 100%;
  /* padding: 20rpx; */
  padding: 20rpx 0;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid #eee;
  font-size:36rpx;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
}
.prompt-input{
  margin: 8%;
  padding: 10rpx 15rpx;
  width: 80%;
  height:85rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}
.textarea {
	width:520rpx;
	height:320rpx;
	background:rgba(248,248,250,1);
	border-radius:8rpx;
	margin: 30rpx auto;
	position: relative;
}
.textarea text {
	display: inline-block;
	position: absolute;
	font-size:22rpx;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(204,204,204,1);
	line-height:30rpx;
	bottom : 16rpx;
	right: 12rpx;
}
.prompt-textarea {
	width: 100%;
	height: 100%;
	padding: 14rpx 22rpx;
	box-sizing: border-box;
	font-size:28rpx;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:rgba(70,70,70,1);
	line-height:40rpx;
}
.prompt-btn-group{
  display: flex;
   height: 100rpx;
   border-top: 1rpx solid rgba(221,221,221,1);
}

.btn-item {
  width: 50%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: white;
  font-size:36rpx;
  /* font-family:PingFangSC-Regular,PingFang SC; */
  font-weight:400;
  color:rgba(153,153,153,1);
  text-align: center;
}
.last-btn {
	color : #2168EB;
	border-left: 2rpx solid #eee;
}
</style>
